leaflet自定义地图（非地理地图） |
您所在的位置：网站首页 › leaflet imageoverlay › leaflet自定义地图（非地理地图） |
leaflet自定义地图（非地理地图）
|
地理地图：现实世界的地图 啥叫非地理地图？真实世界不存在的地图 一般我们的地图不都是以地球上的坐标啊，建筑啊来参考的嘛（经纬度） 但是比如说吃鸡，cf这种地图就不在地球上，不能用地理地图来显示，这个时候，我们就要自定义一个地图，懂？ 非地理地图代码和相关背景图 文件夹结构
head里面的link和script是官网给的，就这么照抄就行了 body里面的div就是你的地图位置，你可以在网页中任何位置加载该地图 div里面的style是控制你的地图在页面中显示的窗口大小 div地下的script就是你自己定义的js js代码创建map就是关联到你div中的map。map中的minZoom可以不要 var image是加载你非地理地图的底图（我的底图在下面已经分享，你也可以定制自己的底图） 除上述两条外，其他的都是添加一些线和点 var map = L.map('map', { crs: L.CRS.Simple, minZoom: 0//控制最大缩小的倍率 }); //设置底图，并规定长宽 var bounds = [[0,0], [1080,1890]];//该输入是[y,x] var image = L.imageOverlay('image/black_new.png', bounds).addTo(map); map.fitBounds(bounds); // var bounds = [[600,600], [10,10]]; // var image = L.imageOverlay('image/yellowpoint.png', bounds).addTo(map); // var sol = L.latLng([ 825, 955 ]);//该输入是[y,x] // L.marker(sol).addTo(map); //点击弹出弹窗并显示当前位置 var popup1 = L.popup(); function onMapClick(e) { console.log(e) console.log(e.latlng) popup1 .setLatLng(e.latlng) .setContent("You clicked the map at x:" + e.latlng.lng.toString()+" y:"+e.latlng.lat.toString()) .openOn(map); } map.on('click', onMapClick); //设置初始视角 map.setView( [600, 650], -1); //该方法就是将xy输入的位置换了一下，以便适应一般人的输入习惯 var yx = L.latLng; var xy = function(x, y) { if (L.Util.isArray(x)) { // When doing xy([x, y]); return yx(x[1], x[0]); } return yx(y, x); // When doing xy(x, y); }; // var sol = xy(900, 900); // var mizar = xy( 41.6, 130.1); // var kruegerZ = xy( 13.4, 56.5); // var deneb = xy(810, 810); // var pointListOne = [ // xy(360,585), // xy(450,585), // xy(495,630), // xy(630,765), // xy(810,585), // xy(990,585), // xy(1170,585), // xy(1170,450) // ] var pointListOne = [ [585,360],[585,450],[630,495],[765,630], [585,810],[585,990],[585,1170],[450,1170] ] var pointListTwo = [ [675,360],[675,495],[675,585],[675,630], [675,765],[675,878],[675,900],[675,1170] ] //添加点和备注 // L.marker( sol).addTo(map).bindPopup( 'Sol'); //添加线和备注 var travel = L.polyline(pointListOne).addTo(map).bindPopup('Sol'); var travelTwo = L.polyline(pointListTwo,{color:'red'}).addTo(map).bindPopup('Sol'); $(document).ready( function createCircle() { for (let i = 0; i |
【本文地址】